<template>
  <Layout>
    <div class="flex grow">
      <div class="flex grow column">
        <Container name="热点透析">
          <div class="loading flex grow column" v-show="toLoding || toMore">
            <Loading v-show="toLoding" size="24px" vertical>加载中...</Loading>

            <img
              :src="PIC_URL + '/tlbypcWeb/wushuju.png'"
              v-show="toMore"
              alt=""
            />
          </div>
          <div class="detail" v-show="!toLoding" ref="detail">
            <div class="title">{{ articleDetail.title }}</div>
            <div class="time">{{ articleDetail.time }}</div>
            <div
              class="txt"
              @click="viewImg($event)"
              v-html="articleDetail.detail"
            ></div>
          </div>
        </Container>
      </div>
      <div class="wrapR flex shrink column">
        <div class="plate flex shrink column">
          <Container name="相关板块">
            <div class="noMore flex grow column" v-if="plateStock.length == 0">
              暂无数据
            </div>
            <div class="stock">
              <div
                class="stockItem"
                v-for="item in plateStock"
                :key="item.id"
                @click="stockDetail(item.stockCode, 8)"
              >
                <p class="stockInfo flex grow">
                  <span class="stockName grow">{{ item.stockName }}</span
                  ><span class="stockCode grow">{{
                    item.stockCode.match(/\d{6}/)[0]
                  }}</span>
                </p>
                <p class="stocks flex grow">
                  <span class="grow new">最新</span
                  ><span class="grow price">{{ item.current }}</span>
                </p>
              </div>
            </div>
          </Container>
        </div>
        <div class="stockBox flex column grow">
          <Container name="相关个股">
            <div
              class="noMore flex grow column"
              v-if="relationStock.length == 0"
            >
              暂无数据
            </div>
            <div class="stock">
              <div
                class="stockItem"
                v-for="item in relationStock"
                :key="item.id"
                @click="stockDetail(item.stockCode)"
              >
                <p class="stockInfo flex grow">
                  <span class="stockName grow">{{ item.stockName }}</span
                  ><span class="stockCode grow">{{
                    item.stockCode.match(/\d{6}/)[0]
                  }}</span>
                </p>
                <p class="stocks flex grow">
                  <span class="grow new">最新</span
                  ><span class="grow price">{{ item.current }}</span>
                </p>
              </div>
            </div>
          </Container>
        </div>
      </div>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </Layout>
</template>

<script>
import dayjs from "dayjs";
import Layout from "@/component/Layout";
import Container from "@/component/Container";
import openImg from "@/component/openImg";

import { imgPath, stockMarker, getUrlParams, isOneMinu } from "../../script/fn";
import format from "date-fns/format";

import {
  queryArticleStock,
  userClickUpdate,
  queryArticleList,
} from "../../api/api";
import { Loading } from "vant";
import stockPush from "../../script/stockPush";
import behavior from "@/utils/behavior";
const userData = { ...behavior };
export default {
  components: { Layout, Loading, Container, openImg },
  data() {
    return {
      relationStock: [],
      plateStock: [],
      articleList: [],
      articleDetail: {
        title: "",
        time: "",
        detail: "",
        articleId: "",
      },
      toLoding: true,
      toMore: false,
      imgSrc: "",
    };
  },
  mounted() {
    this.queryArticleStock();
  },
  methods: {
    async userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.articleDetail.articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      await userClickUpdate(userData).then((data) => {
        // return data.data;
      });
    },
    getCodes(stock) {
      return stock
        .map((it) => it.stockCode.match(/\d{6}/)[0])
        .join(",")
        .split(",");
    },
    async queryArticleStock() {
      const productId = localStorage.getItem("productId");
      await queryArticleStock({
        productId: getUrlParams().productId || productId,
      }).then((back) => {
        if (back.status == 1) {
          this.ArticleStock = back.data;
          this.queryArticleList();
        }
      });
    },
    async queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "热点透析"
      );
      if (!arr.length) return;
      await queryArticleList({
        articleType: arr[0].articleTypeId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.toLoding = false;
          if (data.length == 0) return (this.toMore = true);
          this.articleList = data.map((item) => {
            item.formatTime = dayjs(item.publishTime).format(
              "YYYY-MM-DD HH:MM"
            );
            return item;
          });
          this.showDetail(data[0]);
        }
      });
    },
    stockDetail(code, block) {
      stockMarker(code, "热点透析", block);
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    showDetail(data) {
      this.$refs.detail.scrollTop = 0;
      const {
        articleTitle,
        publishTime,
        articleContent,
        relationStock,
        plateStock,
        articleId,
      } = data;

      this.articleDetail.title = articleTitle;
      // this.articleDetail.time = format(publishTime, "yyyy-MM-dd HH:mm");
      this.articleDetail.time = publishTime;
      this.articleDetail.detail = imgPath(articleContent);
      this.articleDetail.articleId = articleId;
      this.userClick(); //用户行为统计
      if (relationStock.length > 0) {
        stockPush({
          id: "relationStock",
          source: relationStock,
          codes: this.getCodes(relationStock),
          callback: ({ id, value }) => {
            if (id == "relationStock") {
              this[id] = value;
            }
          },
        });
      }
      if (plateStock.length > 0) {
        stockPush({
          id: "plateStock",
          source: plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock,
          codes: this.getCodes(
            plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock
          ),
          callback: ({ id, value }) => {
            if (id == "plateStock") {
              this[id] = value;
            }
          },
        });
      }
    },
  },
};
</script>
<style>
.txt img {
  max-width: 100%;
}
</style>
<style scoped lang="scss">
.loading {
  justify-content: center;
  align-items: center;
}
.noMore {
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #bcbfc4;
}
.detail {
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 20px;
  padding: 0 26px 20px;
  .title {
    color: #45c8ff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .time {
    font-size: 14px;
    color: #45c8ff;
    font-weight: 400;
    margin: 10px 0;
    text-align: center;
  }
  .txt {
    font-size: 18px;
    color: #3bacdb;
    line-height: 28px;
    font-weight: 400;
    text-align: justify;
    word-break: break-all;
  }
}
.wrapR {
  width: 279px;
  margin-left: 18px;
  .plate {
    height: 270px;
    margin-bottom: 18px;
  }
  .stockBox {
    height: calc(100% - 288px);
  }
  .stockItem {
    width: 183px;
    height: 93px;
    background: url($PIC_URL + "/tlbypcWeb/paidService/fengkou_mokuai.png")
      no-repeat center;
    margin: 0 auto 18px;
    padding: 20px 14px;
    box-sizing: border-box;
    cursor: pointer;
    .stockInfo {
      font-size: 18px;
      color: #36a5dd;
      font-weight: 400;
      margin-bottom: 10px;
      .stockCode {
        text-align: right;
      }
    }
    .stocks {
      font-size: 18px;
      font-weight: 400;
      color: #36a5dd;
      .price {
        color: #ff7f00;
        text-align: right;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .stock {
    overflow-y: auto;
    padding-bottom: 18px;
    box-sizing: border-box;
  }
}
</style>
